<template>
  <div>
    <a-page-header :ghost="false" :title="'题库:' + qid" />
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <p class="notice">
        可以点击"<span style="color:blue">返回</span
        >"回到上一个页面（所有题库基础信息）
      </p>
    </a-card>
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <a-card :bordered="false">
        <a-row :gutter="16">
          <a-col :span="26">
            <a-form-model layout="inline">
              <a-form-model-item>
                <a-button type="primary" @click="() => this.$router.go(0)">
                  <a-icon type="left" />返回
                </a-button>
              </a-form-model-item>
              <a-form-model-item label="题库名称">
                <a-input placeholder="请输入试题名称" v-model="questionName" />
              </a-form-model-item>
              <!-- <a-form-model-item label="题型">
                <a-select
                  default-value="全部"
                  style="width: 120px"
                  @change="handleChange"
                >
                  <a-select-option
                    v-for="(item, index) in questionType"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="标签">
                <a-select
                  default-value="全部"
                  style="width: 120px"
                  @change="handleChange"
                >
                  <a-select-option
                    v-for="(item, index) in label"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item> -->
              <a-form-model-item>
                <a-button type="primary" @click="findQuestion">
                  搜索
                </a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="resetSearch">
                  重置
                </a-button>
              </a-form-model-item>

              <a-form-model-item>
                <a-button type="primary" @click="showDrawer">
                  创建试题
                </a-button>
              </a-form-model-item>
              <!-- <a-form-model-item>
                <a-button type="" style="width: 120px;">
                  导出全部试题
                </a-button>
              </a-form-model-item> -->
            </a-form-model>
          </a-col>
        </a-row>
      </a-card>
      <a-spin :spinning="spinning">
        <a-table
          style="margin-top: 16px;"
          :columns="columns"
          :data-source="data"
        >
          <span slot="name" slot-scope="text, record"
            ><a @click="checkQuestion(record)">{{ text }}</a></span
          >
          <span slot="questionTitle">题干</span>
          <span slot="tags" slot-scope="tags">
            <template v-for="tag in tags">
              <a-tooltip v-if="tag.length > 10" :key="tag" :title="tag">
                <a-tag :key="tag" color="#f50">
                  {{ `${tag.slice(0, 10)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag
                v-else-if="tag.length != 0"
                :key="tag"
                :color="tag.length > 5 ? '#87d068' : '#108ee9'"
              >
                {{ tag }}
              </a-tag>
            </template>
          </span>
          <!-- <span slot="action" slot-scope="text,index"> -->
          <template slot="action" slot-scope="text, record">
            <span slot="action">
              <!-- <a-popconfirm
              title="编辑后会同步更新已关联的试卷/考试，确认编辑?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="editQuestion(record)"
            >
              <a>编辑</a>
            </a-popconfirm> -->
              <!-- <a-divider type="vertical" /> -->
              <a-popconfirm
                title="删除后会同步更新已关联的试卷/考试，确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delQuestion(record)"
              >
                <a style="color: #FF4D4F;">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table>
      </a-spin>
    </a-card>

    <!-- 创建编辑窗口 -->
    <div>
      <a-drawer
        placement="right"
        width="720"
        :closable="false"
        :visible="visible"
        :after-visible-change="afterVisibleChange"
        @close="onClose"
      >
        <a-radio-group name="radioType" v-model="value" @change="onChange">
          <a-radio value="1">
            单选题
          </a-radio>
          <a-radio value="2">
            多选题
          </a-radio>
          <a-radio value="3">
            判断题
          </a-radio>
          <a-radio value="4">
            填空题
          </a-radio>
          <a-radio value="5">
            问答题
          </a-radio>
        </a-radio-group>
        <a-divider />
        <RadioPage :qid="qid" v-if="value == '1'" />
        <MultiPage :qid="qid" v-if="value == '2'" />
        <TrueOrFalsePage :qid="qid" v-if="value == '3'" />
        <GapPage :qid="qid" v-if="value == '4'" />
        <EssayPage :qid="qid" v-if="value == '5'" />
      </a-drawer>
    </div>

    <!-- 试题详情 -->
    <div>
      <a-drawer
        placement="right"
        width="720"
        :closable="true"
        :visible="checkVisible"
        :after-visible-change="afterVisibleChange"
        @close="onCloseCheck"
      >
        <a-card :bordered="false" style="width: 100%">
          <p style="font-size:22px;margin-bottom:20px">
            {{ temp.questionName }}
          </p>
          <img
            v-for="(v, k) in temp.questionImg"
            style="width: 100%"
            :key="k"
            :src="v"
          />
          <div v-if="temp.type == 1 || temp.type == 2">
            <a-alert
              v-for="(v, k) in temp.questionOption"
              :key="k"
              :message="v"
              style="margin-top:10px"
              :type="
                temp.questionAnswer.includes(String.fromCharCode(64 + k + 1))
                  ? 'success'
                  : 'error'
              "
            />
          </div>
          <div v-if="temp.type == 3">
            <a-alert
              message="正确"
              style="margin-top:10px"
              :type="temp.questionAnswer == '正确' ? 'success' : 'error'"
            ></a-alert>
            <a-alert
              message="错误"
              style="margin-top:10px"
              :type="temp.questionAnswer == '错误' ? 'success' : 'error'"
            ></a-alert>
          </div>
          <div v-if="temp.type == 4">
            <a-tag
              v-for="(v, k) in temp.questionAnswer"
              :key="k"
              style="margin-top:10px;font-size:16px"
              color="blue"
            >
              空{{ k + 1 }}: {{ v }}
            </a-tag>
          </div>
          <a-card title="答案解析" style="margin-top:20px">
            <img
              v-for="(v, k) in temp.questionAnalysisImg"
              style="width: 100%"
              :key="k"
              :src="v"
            />
            <p style="margin-top:20px;font-size:18px">
              {{ temp.questionAnalysis }}
            </p>
          </a-card>
        </a-card>
      </a-drawer>
    </div>
  </div>
</template>

<script>
const questionType = [
  {
    name: "全部",
    value: "全部"
  },
  {
    name: "单选题",
    value: "单选题"
  },
  {
    name: "多选题",
    value: "多选题"
  },
  {
    name: "判断题",
    value: "判断题"
  },
  {
    name: "填空题",
    value: "填空题"
  },
  {
    name: "问答题",
    value: "问答题"
  }
];

const label = [
  {
    name: "全部",
    value: "全部"
  },
  {
    name: "123",
    value: "123"
  },
  {
    name: "234",
    value: "234"
  },
  {
    name: "345",
    value: "345"
  },
  {
    name: "456",
    value: "456"
  }
];

const columns = [
  {
    dataIndex: "questionName",
    key: "name",
    slots: { title: "questionTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "题型",
    dataIndex: "questionType",
    key: "questionType"
  },
  {
    title: "标签",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "答案",
    dataIndex: "questionAnswer",
    key: "questionAnswer"
  },
  {
    title: "更新时间",
    dataIndex: "createdTime",
    key: "createdTime"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

import RadioPage from "./Type/Radio";
import MultiPage from "./Type/MultiSelect";
import TrueOrFalsePage from "./Type/TOrF";
import GapPage from "./Type/Gap";
import EssayPage from "./Type/Essays";

export default {
  props: ["qid"],
  components: { RadioPage, MultiPage, TrueOrFalsePage, GapPage, EssayPage },
  data() {
    return {
      questionName: "", // 用于模糊查询
      // qid: this.$route.query.qid,
      spinning: false,
      questionType,
      label,
      columns,
      data: [],
      visible: false,
      checkVisible: false,
      value: "1", // 1-单选，2-多选，3-频道，4-填空，5-问答
      temp: {},
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px"
      },
      editForm: {}
    };
  },
  provide() {
    return {
      getAnswer: this.getAnswer
    };
  },
  created() {
    // console.log(this.qid);
    this.getAnswer();
  },
  methods: {
    // select
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    // drawer
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    onCloseCheck() {
      this.checkVisible = false;
    },
    onChange(e) {
      // console.log("radio checked", e.target.value);
      // console.log(this.value);
    },
    getAnswer() {
      this.spinning = true;
      this.visible = false;
      this.$axios
        .get("/get/questions/" + this.qid, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].key = res.data.data[i].id;
              // 处理类型
              if (res.data.data[i].type == 1)
                res.data.data[i].questionType = "单选题";
              else if (res.data.data[i].type == 2)
                res.data.data[i].questionType = "多选题";
              else if (res.data.data[i].type == 3) {
                res.data.data[i].questionType = "判断题";
                res.data.data[i].questionAnswer =
                  res.data.data[i].questionAnswer == "1" ? "正确" : "错误";
              } else if (res.data.data[i].type == 4)
                res.data.data[i].questionType = "填空题";
              else if (res.data.data[i].type == 5)
                res.data.data[i].questionType = "问答题";
              // 处理标签
              res.data.data[i].tags = res.data.data[i].questionTags.split(",");
              // 处理时间
              res.data.data[i].createdTime = res.data.data[
                i
              ].createdTime.replace("T", " ");
            }
            // 赋值
            this.data = res.data.data;
            // console.log(res.data.data);
          }
        });
      this.spinning = false;
    },
    // 删除试题信息
    delQuestion(record) {
      // 该题库所对应的id
      // console.log(record.id);
      this.$axios
        .delete("/delete/questions/" + record.id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.getAnswer();
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    checkQuestion(record) {
      console.log(record);
      this.checkVisible = true;
      this.temp = record;
      if (this.temp.questionImg != "")
        this.temp.questionImg = this.temp.questionImg.split(",");
      this.temp.questionAnalysisImg = this.temp.questionAnalysisImg.split(",");
      if (this.temp.type == 1 || this.temp.type == 2)
        this.temp.questionOption = this.temp.questionOption.split("[]");
      if (this.temp.type == 1 || this.temp.type == 2 || this.temp.type == 4)
        this.temp.questionAnswer = this.temp.questionAnswer.split(",");
      if (this.temp.type == 4)
        this.temp.questionName = this.temp.questionName.replaceAll(
          "[]",
          "_____ "
        );
    },
    editQuestion(record) {
      this.value = record.type;
      console.log(record);
    },
    findQuestion() {
      if (this.questionName.match(/^[ ]*$/)) {
        return this.$message.error("不能为空");
      }
      this.spinning = true;
      if (this.questionName.replace(/(^s*)|(s*$)/g, "").length == 0) {
        this.getAnswer();
        return;
      }
      this.$axios
        .get("/find/questions/" + this.questionName + "/" + this.qid, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].key = res.data.data[i].id;
              // 处理类型
              if (res.data.data[i].type == 1)
                res.data.data[i].questionType = "单选题";
              else if (res.data.data[i].type == 2)
                res.data.data[i].questionType = "多选题";
              else if (res.data.data[i].type == 3) {
                res.data.data[i].questionType = "判断题";
                res.data.data[i].questionAnswer =
                  res.data.data[i].questionAnswer == "1" ? "正确" : "错误";
              } else if (res.data.data[i].type == 4)
                res.data.data[i].questionType = "填空题";
              else if (res.data.data[i].type == 5)
                res.data.data[i].questionType = "问答题";
              // 处理标签
              res.data.data[i].tags = res.data.data[i].questionTags.split(",");
              // 处理时间
              res.data.data[i].createdTime = res.data.data[
                i
              ].createdTime.replace("T", " ");
            }
            // 赋值
            this.data = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      this.spinning = false;
    }, // 重置搜索
    resetSearch() {
      this.questionName = "";
      this.getAnswer();
    }
  }
};
</script>

<style scoped>
.notice {
  color: #ff4d4f;
  font-size: 16px;
  padding-top: 16px;
}
.notice2 {
  font-size: 16px;
}
</style>
